<template>
    <view class="content" :style="themeColor">
        <view class="layout-page">
            <!-- 首页 -->
            <home v-show="active === 'home'" :visible="active === 'home'" @change="handleTabChange" />

            <!-- 商品 -->
            <view v-if="getAppSet().pagesClassify">
                <ProductClss v-show="active === 'product'" :visible="active === 'product'" @change="handleTabChange" />
            </view>
            <view v-else>
                <product v-show="active === 'product'" :visible="active === 'product'" @change="handleTabChange" />
            </view>

            <!-- <view>
                <ProductCategory v-show="active === 'product'" :visible="active === 'product'"
                    @change="handleTabChange" />
            </view> -->

            <!-- 采购模式 -->
            <view v-if="getSupplierMode() == 0">
                <!-- 购物车 -->
                <cart v-show="active === 'cart'" :visible="active === 'cart'" @change="handleTabChange" />
                <!-- 订单 -->
                <order v-show="active === 'order'" :refreshView="refreshOrder" :visible="active === 'order'"
                    @change="handleTabChange" />
            </view>
            <!-- 供应模式 -->
            <view v-if="getSupplierMode() == 1">
                <!-- 供应商 -->
                <Supplier v-show="active === 'supplier'" :visible="active === 'supplier'" @change="handleTabChange" />
                <!-- 供应商购物车 -->
                <SupplierCart v-show="active === 'cart'" :visible="active === 'cart'" @change="handleTabChange" />
                <!-- 供应商订单 -->
                <SupplierOrder v-show="active === 'order'" :refreshView="refreshOrder" :visible="active === 'order'"
                    @change="handleTabChange" />
            </view>
            <!-- 团购专区购物车 -->
            <!-- 团购专区商品 -->
            <!-- <Group v-show="active === 'group'" :visible="active === 'group'" @change="handleTabChange" /> -->
            <!-- 我的 -->
            <message v-show="active === 'message'" :visible="active === 'message'" @change="handleTabChange" />

            <view v-if="getAppSet().userCenterMenu.isTemplateRender">
                <!-- 个人中心根据配置模版数据显示 -->
                <meTpl v-show="active === 'me'" :visible="active === 'me'" :refresh="refreshMe"
                    @change="handleTabChange" />
            </view>
            <view v-else>
                <!-- 个人中心固定信息显示 -->
                <me v-show="active === 'me'" :visible="active === 'me'" :refresh="refreshMe"
                    @change="handleTabChange" />
            </view>
        </view>
        <!-- 在handleChange中手动判断进行active的赋值 -->
        <lb-tabbar v-if="tabbars && tabbarsshow" ref="tabbar" id="tabbar" v-model="active" @change="handleChange"
            inactiveColor="#666666" :tabBarBg="tabBarBg" :activeColor="getThemeColor">
            <!-- 供应商菜单必须要在供应商模式下 -->
            <lb-tabbar-item v-if="
                item.isShow &&
                item.name &&
                ((item.name == 'supplier' && getSupplierMode() == 1) || item.name != 'supplier')
            " :isDefaultSet="isDefaultTab" v-for="item in tabbars" :key="item.name" :name="item.name"
                :iconCurrent="item.iconCurrent" :icon="item.icon" :dot="item.dot" :info="item.info"
                @click="handleTabbarItemClick">
                {{ item.text }}
            </lb-tabbar-item>
        </lb-tabbar>
        <app-version :isAutoCheck="false" :appId="getAppId()"></app-version>
        <show-modal></show-modal>
    </view>
</template>

<script>
import Home from "@/pages/home/index.vue"
import Me from "@/pages/me/index.vue"
import MeTpl from "@/pages/me/indexTemplate.vue"
import Message from "@/pages/message/index.vue"
// 团购专区
import Group from "@/pages/group/index.vue"
// 团购专区购物车页面
import GroupCart from "@/pages/group/cart/index.vue"
// 批发菜单页面
import Order from "@/pages/order/index.vue"
import Cart from "@/pages/cart/index.vue"
import Product from "@/pages/product/index.vue"
// 沪材通商品列表页面
import ProductClss from "@/pages/productClass/index.vue"

// 仿天猫分类列表页
// import ProductCategory from "@/pages/productCategory/index.vue"

// 供应商菜单页面
import Supplier from "@/pages/supplier/index.vue"
import SupplierCart from "@/pages/supplier/cart/index.vue"
import SupplierOrder from "@/pages/supplier/order/index.vue"

import lbTabbar from "@/components/lb-tabbar/lb-tabbar.vue"
import lbTabbarItem from "@/components/lb-tabbar/lb-tabbar-item.vue"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"

import storage from "@/uni-sub-base/utils/storage.js"
import { eventBus } from "@/utils/eventBus.js"
import { getCartTotal, getUserCarList, getSupplierCarList } from "@/utils/cartUtil.js"
import { GetMemberGradeInfo } from "@/service/api/member.js"
import { GetCommuntiyIsOpen } from "@/service/api/takeDelivery.js"
import { GetPageTemplateJson } from "@/service/api/pageTemplate.js"
export default {
    components: {
        Home,
        Me,
        MeTpl,
        Group,
        Order,
        Cart,
        Product,
        ProductClss,
        // ProductCategory,
        Supplier,
        SupplierCart,
        SupplierOrder,
        lbTabbar,
        lbTabbarItem,
        appVersion,
        GroupCart,
        Message
    },
    data() {
        return {
            active: "home",
            tabbars: null,
            tabbarsshow: true,
            ableHeight: 0,
            refreshMe: false,
            refreshOrder: false,
            refreshProduct: false,
            cartDatas: [],
            cartSupplierDatas: [],
            isDefaultTab: true,
            tabBarBg: "",
            defaultIcons: [
                {
                    name: "home",
                    text: "首页",
                    icon: "icon-shouye1",
                    iconCurrent: "icon-shouye11",
                },
                {
                    name: "product",
                    text: "商品",
                    icon: "icon-fenlei11",
                    iconCurrent: "icon-fenlei1",
                },
                {
                    name: "supplier",
                    text: "供应商",
                    icon: "icon-gongying",
                    iconCurrent: "icon-gongying1",
                },
                {
                    name: "cart",
                    text: "购物车",
                    icon: "icon-gouwuche",
                    iconCurrent: "icon-gouwuche11",
                },
                {
                    name: "order",
                    text: "订单",
                    icon: "icon-dingdan",
                    iconCurrent: "icon-dingdan1",
                },
                {
                    name: "me",
                    text: "我的",
                    icon: "icon-gerenzhongxin",
                    iconCurrent: "icon-gerenzhongxin1",
                },
            ],
            groupSwitch: false,
        }
    },
    // created() {
    // 	let token = storage.getCache("token")
    // 	if (token) {
    // 		this.GetMemberGradeInfo()
    // 	}else{
    // 		let url = "/pages/login/loading"
    // 		uni.reLaunch({
    // 			url: url,
    // 		})
    // 		return
    // 	}
    // },
    onLoad(query) {
        // 可通过地址栏传tab参数可指定默认显示哪个tab页面
        this.active = query.tab || "home"
        let token = storage.getCache("token")
        if (token) {
            this.GetMemberGradeInfo()
        }
    },
    onShow() {
        if (this.active == "me") {
            this.refreshMe = false
            this.$nextTick(() => {
                this.refreshMe = true
            })
        } else if (this.active == "order") {
            this.refreshOrder = false
            setTimeout((e) => {
                this.refreshOrder = true
            }, 50)
        } else if (this.active == "product") {
            this.refreshProduct = false
            this.$nextTick(() => {
                this.refreshProduct = true
            })
        }
    },
    onShareTimeline(res) {
        return {
            title: "",
            path: "",
            imageUrl: "",
            success(res) {
                uni.showToast({
                    title: "分享成功",
                })
            },
            fail(res) {
                uni.showToast({
                    title: "分享失败",
                    icon: "none",
                })
            },
        }
    },
    onReady() { },
    destroyed() {
        //取消监听 防止重复
        eventBus.$off("CHANGE_TAB")
        eventBus.$off("SET_CART")
        eventBus.$off("SET_SUPPLIER_CART")
        eventBus.$off("GET_SUPPLIER_CART_DATA_FOR_SUB")
    },
    mounted() {
        let token = storage.getCache("token")
        this.groupIsOpen()
        eventBus.$on("CHANGE_TAB", (msg) => {
            let result = this.tabbars.find((e) => {
                return e.name == msg
            })
            if (result && result.isShow) {
                //有显示，切换
                this.active = msg
                console.log('active' + this.active)
            } else {
                //没有显示，进入内页
                if (msg == "order") {
                    this.goOrderPage()
                } else if (msg == "cart") {
                    this.goCartPage()
                }
            }
        })

        eventBus.$on("SET_CART", (msg) => {
            if (this.getSupplierMode() == 1) {
                this.cartSupplierDatas = this.formatSupplierCart(msg)
                eventBus.$emit("SET_CART_FOR_SUB", msg)
            }

            if (msg) {
                this.cartDatas = msg
                //更新角标
                this.tabbars.forEach((e) => {
                    if (e.name == "cart") {
                        this.easyUpTabBarBadge(msg, (res) => {
                            e.info = res
                            this.$forceUpdate()
                        })
                    }
                })
            }
        })
        eventBus.$on("GET_CART_DATA_FOR_SUB", (msg) => {
            eventBus.$emit("SET_CART_FOR_SUB", this.cartDatas)
        })
        this.$nextTick(() => {
            setTimeout((e) => {
                //初始化获取购物车
                let token = storage.getCache("token")
                if (token) {
                    getUserCarList((res) => { })
                }
            }, 1000)
        })
        if (this.getSupplierMode() == 1) {
            //供应商
            eventBus.$on("GET_CART_DATA_FOR_SUB", (msg) => {
                eventBus.$emit("SET_CART_FOR_SUB", this.cartSupplierDatas)
            })
        }
    },
    methods: {
        GetMemberGradeInfo() {
            GetMemberGradeInfo().then((rsp) => {
                if (rsp.State == 1 && rsp.Data) {
                    if (rsp.Data.Name == '注册会员' || rsp.Data.Name == '会员晒单') {
                        this.active = 'me'
                    }
                }
            })
        },
        groupIsOpen() {
            GetCommuntiyIsOpen().then((res) => {
                if (res.State == 1) {
                    this.groupSwitch = true
                }
                this.getPageTemplateJson()
            })
        },
        getPageTemplateJson() {
            let param = {
                pageType: 5, //获取底部菜单
            }
            let path = `?pageType=5`
            GetPageTemplateJson(param, path).then((res) => {
                if (res.State == 1 && res.Data) {
                    try {
                        let obj = JSON.parse(res.Data)
                        console.log("=======", obj)
                        this.tabBarBg = obj.NavBg ? obj.NavBg : ""
                        let tabs = obj.NavList
                        let tabArr = []
                        if (tabs && tabs.length > 0) {
                            tabs.forEach((e) => {
                                let tab = {
                                    name: e.Link,
                                    text: e.Name,
                                    icon: e.BeforeIcon,
                                    iconCurrent: e.AfterIcon,
                                    isShow: true,
                                }
                                tabArr.push(tab)
                            })
                            // if (this.groupSwitch) {
                            //     let group = {
                            //         name: "group",
                            //         text: "团购专区",
                            //         icon: "icon-tuangou-moren",
                            //         iconCurrent: "icon-tuangou-moren",
                            //         isShow: true,
                            //     }
                            //     tabArr.splice(2, 0, group)
                            // }
                            // GetMemberGradeInfo().then((rsp) => {
                            // 	if (rsp.State == 1 && rsp.Data) {
                            // 		if(rsp.Data.Name=='注册会员' || rsp.Data.Name=='会员晒单'){
                            // 			tabArr.splice(0,tabArr.length-1)
                            // 		}
                            // 	}
                            // 	this.tabbars = tabArr
                            // })
                            this.tabbars = tabArr

                            this.isDefaultTab = false
                        } else {
                            //取默认
                            this.getDefaultTabbars()
                        }
                    } catch (e) {
                        //取默认
                        this.getDefaultTabbars()
                        console.log(e)
                    }
                } else {
                    //取默认
                    this.getDefaultTabbars()
                }
            })
            // this.getDefaultTabbars1()
        },
        getDefaultTabbars() {
            this.isDefaultTab = true
            let tabs = [
                {
                    id: 1,
                    name: "home",
                    text: "首页",
                    icon: "icon-shouye1",
                    iconCurrent: "icon-shouye11",
                    isShow: true,
                },
                {
                    id: 5,
                    name: "product",
                    text: "商品",
                    icon: "icon-fenlei11",
                    iconCurrent: "icon-fenlei1",
                    isShow: true,
                },
                {
                    id: 5,
                    name: "supplier",
                    text: "供应商",
                    icon: "icon-gongying",
                    iconCurrent: "icon-gongying1",
                    isShow: false,
                },
                {
                    id: 7,
                    name: "group",
                    text: "团购专区",
                    icon: "icon-tuangou-moren",
                    iconCurrent: "icon-tuangou-moren",
                    isShow: false,
                },
                {
                    id: 4,
                    name: "cart",
                    text: "购物车",
                    icon: "icon-gouwuche",
                    iconCurrent: "icon-gouwuche11",
                    info: 0,
                    isShow: true,
                },
                {
                    id: 3,
                    name: "order",
                    text: "订单",
                    icon: "icon-dingdan",
                    iconCurrent: "icon-dingdan1",
                    isShow: true,
                },
                {
                    id: 2,
                    name: "me",
                    text: "我的",
                    icon: "icon-gerenzhongxin",
                    iconCurrent: "icon-gerenzhongxin1",
                    isShow: true,
                },
            ]
            if (this.getSupplierMode() == 1) {
                tabs.forEach((e) => {
                    if (e.name == "product") {
                        e.isShow = false
                    }
                    if (e.name == "supplier") {
                        e.isShow = true
                    }
                })
            } else {
                tabs.forEach((e) => {
                    if (e.name == "group") {
                        if (this.groupSwitch) {
                            e.isShow = true
                        } else {
                            e.isShow = false
                        }
                    }
                })
            }
            this.tabbars = tabs
        },
        getDefaultTabbars1() {
            this.isDefaultTab = true
            let tabs = [
                {
                    id: 1,
                    name: "home",
                    text: "首页",
                    icon: "icon-shouye1",
                    iconCurrent: "icon-shouye11",
                    isShow: true,
                },
                {
                    id: 3,
                    name: "message",
                    text: "消息",
                    icon: "icon-xiaoxi1",
                    iconCurrent: "icon-xiaoxizhongxin",
                    isShow: true,
                },
                {
                    id: 2,
                    name: "me",
                    text: "我的",
                    icon: "icon-gerenzhongxin",
                    iconCurrent: "icon-gerenzhongxin1",
                    isShow: true,
                },
            ]
            if (this.getSupplierMode() == 1) {
                tabs.forEach((e) => {
                    if (e.name == "product") {
                        e.isShow = false
                    }
                    if (e.name == "supplier") {
                        e.isShow = true
                    }
                })
            } else {
                tabs.forEach((e) => {
                    if (e.name == "group") {
                        if (this.groupSwitch) {
                            e.isShow = true
                        } else {
                            e.isShow = false
                        }
                    }
                })
            }
            this.tabbars = tabs
        },
        handleChange(e) {
            this.active = e.name
            if (e.name == "group") {
                uni.navigateTo({
                    url: "/pages/group/index",
                })
            }
        },
        handleTabChange(name) {
            let result = this.tabbars.find((e) => {
                return e.name == name
            })
            if (!result) {
                return
            }
            if (result.isShow) {
                //有显示，切换
                this.active = name
            } else {
                //没有显示，进入内页
                if (name == "order") {
                    this.goOrderPage()
                } else if (msg == "cart") {
                    this.goCartPage()
                }
            }
        },
        handleTabbarItemClick(e) {
            console.log(e)

            let token = storage.getCache("token")
            if (e.name == "me" && (!token || token == "")) {
                this.$showModal({ show: true })
                return
            } else {
                let oldActive = this.active;
                this.active = e.name
                if (oldActive == "home") {
                    let param = {
                        title: '首页',
                    }
                    this.tackVisit(param)
                    this.initTack()
                }
                if (oldActive == "product") {
                    let param = {
                        title: '商品列表',
                    }
                    this.tackVisit(param)
                    this.initTack()
                }
                if (oldActive == "cart") {
                    let param = {
                        title: '购物车',
                    }
                    this.tackVisit(param)
                    this.initTack()
                }
                if (oldActive == "order") {
                    let param = {
                        title: '订单列表',
                    }
                    this.tackVisit(param)
                    this.initTack()
                }
                if (oldActive == "me") {
                    let param = {
                        title: '个人中心',
                    }
                    this.tackVisit(param)
                    this.initTack()
                }
            }
        },
    },
    watch: {
        active: {
            handler(newVal) { },
            immediate: true,
        },
    },
}
</script>

<style lang="scss">
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    .layout-page {
        min-height: 0;
        flex: 1;

        /deep/ .page {
            height: 100%;
        }
    }
}
</style>
